<template>
    <div class="container_box">
        <div class="login_box">
            <h1>嗨购电商系统</h1>
            <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                class="demo-ruleForm">
                <el-form-item prop="adminname">
                    <el-input v-model="ruleForm.adminname" type="text" autocomplete="off">
                        <template #prefix>
                            <el-icon>
                                <User />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password">
                        <template #prefix>
                            <el-icon>
                                <Lock />
                            </el-icon>
                        </template>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="loginIn">
                       登录
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import type { FormInstance, FormRules } from 'element-plus';
import { doLogin } from '@/api/login';
import { useUserStore } from '@/stores/useUser';
import router from '@/router';
const useUser = useUserStore();
const ruleFormRef = ref<FormInstance>();
// 验证规则的函数（写在上面）
const validateadmin = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入用户名'));
    } else {
        callback();// 通过验证
    }
}
const validatePass = (rule: any, value: any, callback: any) => {
    if (value === '') {
        callback(new Error('请输入密码'));
    } else if (!/^\d{6}$/.test(value)) {
        callback(new Error('请输入6位数字'));
    } else {
        callback();// 通过验证
    }
}

// 数据(响应式数据)
const ruleForm = reactive({
    adminname: 'admin',
    password: '123456'
})

// 数据的规则
const rules = reactive<FormRules<typeof ruleForm>>({
    adminname: [{ validator: validateadmin, trigger: 'blur' }], // 失去焦点的时候触发前面的函数
    password: [{ validator: validatePass, trigger: 'blur' }]
})

// 登录
const loginIn = () => {
    // 首先我们需要发请求获取数据的操作放在pinia中尽显
   doLogin(ruleForm).then(res=>{
     console.log("登录",res.data)
       if (res.data.code==200) {
          useUser.changeToken(res.data.data.token)
          useUser.changeAdminId(res.data.data.adminid);
          useUser.changeRole(res.data.data.role)
          useUser.changeAdminName(res.data.data.adminname)
          useUser.changeCheckedKeys(res.data.data.checkedkeys)
          router.push("/home");
       }
   })
}
</script>
<style>
html,
body,
#app {
    height: 100%;
}

.container_box {
    height: 100%;
    background-color: black;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login_box {
    width: 500px;
    height: 300px;
    background-color: #fff;
    padding: 35px;
    text-align: center;
}

.el-button--primary {
    width: 100%;
}
</style>